<script lang="ts">
import { reactive, watchEffect, ref } from "vue";
import { defineComponent } from "vue-demi";
import { useRouter } from "vue-router";
import { request } from "@/utils";
import moment from "moment";
import { ElMessageBox } from 'element-plus'

import { ElNotification } from 'element-plus'
import { fromPairs } from "lodash";

// import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults'

export default defineComponent({
    setup() {
        //商品添加
        const form = reactive<{ goodsname: string, time_reg: string }>({
            goodsname: '',
            time_reg: ''
        })
        //商品渲染
        let obj = reactive<{ tableData: any[]; total: number; page: number }>({
            tableData: [],
            total: 0,
            page: 1,
        });
        const drawer2 = ref(false)
        const direction = ref('btt')//抽屉打开得方向
        //数据得渲染
        const renderDate = async () => {
            const { data } = await request.get('/goods/category')
            console.log(data, '数据');

            obj.tableData = data.data
        }
        //时间格式
        const formatDate = (d: string, fmt = "YYYY-MM-DD") => {
            return moment(d).format(fmt);
        };

        //添加商品
        const router = useRouter()
        const addItem = async () => {
            const { data } = await request.get('goods/category')
            console.log(data);

            form.goodsname = data.data
        }

        //抽屉
        const handleClose = (done: () => void) => {
            ElMessageBox.confirm('Are you sure you want to close this?')
                .then(() => {
                    done()
                })
                .catch(() => {
                    // catch error
                })
        }

        
        //关闭窗口
        function cancelClick() {
            drawer2.value = false
        }
        async function confirmClick() {
        // this.$refs.myrom.
            const { data } = await request.post('goods/category', {
                goodsname: form.goodsname
            })
            ElMessageBox.confirm(`请确定添加的商品!`)
                .then(() => {
                    drawer2.value = false
                    if (data.code === 200) {
                        ElNotification({
                            title: '添加成功',
                            message: '商品分类添加成功',
                            type: 'success',
                        })
                    }
                    form.goodsname = ''
                    
                })
                .catch(() => {
                    // catch error
                })
    

            renderDate()

        }



        renderDate()

        return {
            obj,
            form,
            renderDate,
            formatDate,
            // addItem
            handleClose,
            cancelClick,
            confirmClick,
            drawer2,
            direction,
            
        }
    }



})


</script>

<template>
    <div>
        <div>{{myform}}123</div>
        <el-button type="success" @click="drawer2 = true">
            添加<el-icon class="el-icon--right">
                <CirclePlusFilled />
            </el-icon>
        </el-button>

        <el-drawer v-model="drawer2" :direction="direction">
            <template #title>
                <h4>商品添加</h4>
            </template>
            <template #default>
                <el-form :model="form" label-width="120px">
                    <el-form-item label="商品分类">
                        <el-input v-model="form.goodsname" :autofocus="true"/>
                    </el-form-item>
                </el-form>
            </template>
            <template #footer>
                <div style="flex: auto">
                    <el-button @click="cancelClick">取消</el-button>
                    <el-button type="primary" @click="confirmClick">确定</el-button>
                </div>
            </template>
        </el-drawer>


    </div>

    <el-table :data="obj.tableData" style="width: 100%">
        <el-table-column type="index" label="#" width="80" />
        <el-table-column prop="goodsname" label="商品名称" />
        <el-table-column prop="time_reg" label="添加时间" v-slot="{ row }">
            {{ formatDate(row.time_reg) }}
        </el-table-column>
        <!-- 操作 -->
        <el-table-column prop="action" label="操作" v-slot="{ row }">
            <el-popconfirm title="确认删除吗？" confirm-button-text="是" cancel-button-text="否" @confirm="removeItem(row.id)">
                <template #reference>
                    <el-button type="danger" circle>
                        <el-icon class="el-icon--middle">
                            <DeleteFilled />
                        </el-icon>
                    </el-button>
                </template>
            </el-popconfirm>
        </el-table-column>
    </el-table>
</template>
